<template>
  <div>
    <h2>Message 消息提示</h2>
    <p>常用于主动操作后的反馈提示。</p>
    <h3>基础用法</h3>
    <p>从顶部出现, 3秒后自动消失</p>
    <div class="demo-block">
      <div class="demo-block-content">
        <div class="demo-block-content-row">
          <az-button @click="handleClick1">默认</az-button>
          <az-button @click="handleClick2">成功</az-button>
          <az-button @click="handleClick3">失败</az-button>
          <az-button @click="handleClick4">警告</az-button>
        </div>
      </div>
      <div class="demo-block-code">
        <pre><code class="language-html">{{ example1_html }}</code><code class="language-js">{{ example1_js }}</code></pre>
      </div>
    </div>
    <h3>手动关闭</h3>
    <p>添加关闭按钮，用户可手动关闭</p>
    <div class="demo-block">
      <div class="demo-block-content">
        <div class="demo-block-content-row">
          <az-button @click="handleClick5">可手动关闭</az-button>
        </div>
      </div>
      <div class="demo-block-code">
        <pre><code class="language-html">{{ example2_html }}</code><code class="language-js">{{ example2_js }}</code></pre>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Message } from '@azur-ui/components/src/message'

const handleClick1 = () => {
  Message('这是一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的消息提示')
}
const handleClick2 = () => {
  Message({
    message: '这是一条成功的消息提示',
    type: 'success'
  })
}
const handleClick3 = () => {
  Message({ message: '这是一条失败的消息提示', type: 'error' })
}
const handleClick4 = () => {
  Message({ message: '这是一条警告的消息提示', type: 'warning' })
}
const handleClick5 = () => {
  Message({ message: '可手动关闭的消息提示', type: 'success', showClose: true })
}

const example1_html = `<az-button @click="handleClick1">默认</az-button>
<az-button @click="handleClick2">成功</az-button>
<az-button @click="handleClick3">失败</az-button>
<az-button @click="handleClick4">警告</az-button>`
const example1_js = `

const handleClick1 = () => {
  Message('这是一条消息提示')
}
const handleClick2 = () => {
  Message({ message: '这是一条成功的消息提示', type: 'success' })
}
const handleClick3 = () => {
  Message({ message: '这是一条失败的消息提示', type: 'error' })
}
const handleClick4 = () => {
  Message({ message: '这是一条警告的消息提示', type: 'warning' })
}`

const example2_html = `<az-button @click="handleClick5">可手动关闭</az-button>`
const example2_js = `

const handleClick5 = () => {
  Message({ message: '可手动关闭的消息提示', type: 'success', showClose: true })
}`
</script>

<style scoped></style>
